import { getActionSheetList } from '@/servers/api/base';
import { getProfessionalList } from '@/servers/api/collection';
import {
    FormattedMessage,
    history,
    useIntl,
    useLocation,
    useModel,
} from '@umijs/max';
import { Button, Cascader, Col, Form, Row, Select, Space, Table } from 'antd';
import { useEffect, useState } from 'react';

export default function AgencyList() {
    let location = useLocation();
    const intl = useIntl();
    const { cityOptions } = useModel('global');
    const [form] = Form.useForm();
    const [dataSource, setdataSource] = useState([]); //表格
    const [release_goods, setrelease_goods] = useState([]); //经营范围
    /** 详情 */
    function details(row) {
        history.push('/detail', {
            id: row.id,
            type: location?.state?.type,
            releaseType: 'professional',
        });
    }

    /** 数据总条数 */
    const [count,setCount] = useState(0)
    /** loading */
    const [loading,setLoading] = useState(true)

    const columns = [
        {
            title: <FormattedMessage id="个人名称"></FormattedMessage>,
            key: 'person_name',
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.person_name' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="经营范围"></FormattedMessage>,
            key: 'industry',
            render: (text, record) => (
                <>{record.category[intl.formatMessage({ id: 'item.name' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="专业技能"></FormattedMessage>,
            key: 'skill',
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.skill' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="所在城市"></FormattedMessage>,
            key: 'personcitys',
            render: (text, record) => (
                <>
                    <>
                        {
                            record.personcitys[
                                intl.formatMessage({
                                    id: 'item.city.mergename',
                                })
                            ]
                        }
                    </>
                </>
            ),
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 10,
        limit:10,
        person_city: [], //城市信息
        type: 1,
        scope_category_id: '', //经营范围
        person_in_country: '',
        person_from_country: '',
    });
    /** 分页 */
    const handleTableChange = (pagination:any) => {
        settableparams(prevParams => ({
            ...prevParams,
            page: pagination.current,  /** 更改页数 */
        }));
    };
    function goodsList(params: any) {
        /** 赋值loading状态 */
        setLoading(true)
        const qParams = {
            ...params,
        };
        delete qParams.person_city;
        if (params.person_city && params.person_city.length > 0) {
            qParams.person_city =
                params.person_city[params.person_city.length - 1];
        }
        getProfessionalList({ ...qParams }).then((res) => {
            /** 赋值loading状态 */
            setLoading(false)
            /** 赋值总条数 */
            setCount(res.count)
            settableparams(params);
            /** 赋值列表数据 */
            setdataSource(res.data);
        });
    }
    useEffect(() => {
        (async () => {
            const release_goods = await getActionSheetList({
                type: 'release_professional',
            });
            setrelease_goods(release_goods.data);
            goodsList({ ...tableparams, type: location?.state?.type });
        })();
    }, [tableparams.page]); /** 监听tableparams改变调用接口获取分页数据 */
    return (
        <>
            <Form
                colon={false}
                form={form}
                onFinish={(params) =>
                    goodsList({
                        ...tableparams,
                        ...params,
                        page: 1,
                        size: 10,
                    })
                }
                autoComplete="off"
            >
                <Row gutter={15}>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="所在国家"></FormattedMessage>
                            }
                            name="person_in_country"
                        >
                            <Select
                                placeholder={intl.formatMessage({
                                    id: '所在国家',
                                })}
                                options={[
                                    {
                                        label: intl.formatMessage({
                                            id: '在中国',
                                        }),
                                        value: 0,
                                    },
                                    {
                                        label: intl.formatMessage({
                                            id: '在俄罗斯',
                                        }),
                                        value: 1,
                                    },
                                ]}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="国籍"></FormattedMessage>
                            }
                            name="person_from_country"
                        >
                            <Select
                                placeholder={intl.formatMessage({
                                    id: '请选择您的国籍',
                                })}
                                options={[
                                    {
                                        label: intl.formatMessage({
                                            id: '中国国籍',
                                        }),
                                        value: 0,
                                    },
                                    {
                                        label: intl.formatMessage({
                                            id: '俄罗斯国籍',
                                        }),
                                        value: 1,
                                    },
                                ]}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="经营范围"></FormattedMessage>
                            }
                            name="scope_category_id"
                        >
                            <Select
                                options={release_goods}
                                placeholder={intl.formatMessage({
                                    id: '请选择经营范围 >',
                                })}
                                allowClear
                                fieldNames={{
                                    label: intl.formatMessage({
                                        id: 'item.name',
                                    }),
                                    value: 'id',
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="地区"></FormattedMessage>
                            }
                            name="person_city"
                        >
                            <Cascader
                                placeholder={intl.formatMessage({
                                    id: '地区',
                                })}
                                allowClear
                                options={cityOptions}
                                fieldNames={{ value: 'label' }}
                                changeOnSelect
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item>
                            <Space>
                                <Button htmlType="submit" type="primary">
                                    <FormattedMessage id="搜索"></FormattedMessage>
                                </Button>
                                <Button
                                    htmlType="reset"
                                    onClick={() => {
                                        goodsList({
                                            page: 1,
                                            size: 10,
                                        });
                                    }}
                                >
                                    <FormattedMessage id="重置"></FormattedMessage>
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Table
                loading={loading}
                dataSource={dataSource}
                rowKey="id"
                columns={columns}
                pagination={{
                    pageSize: 10,  // 每页条数
                    total: count,  // 总条数
                    showSizeChanger: false,
                    onChange: (page, pageSize) => handleTableChange({ current: page, pageSize }),
                }}
            />
        </>
    );
}
